<template>
    <section class="intelligent-content-bg overflowYAll">
        <div class="intelligent-content-box">
            <el-form :inline="true" :model="form" class=" origan-info-box" >
                <el-form-item >
                    <el-button v-hasPermission="'add'" type="primary"  @click="add" >+ 新增</el-button>
                </el-form-item>
                <el-form-item >
                    <el-input  v-model="form.name" placeholder="请输入数据源名称">
                        <el-button icon="el-icon-search" slot="append" @click="search"></el-button>
                    </el-input>
                </el-form-item>
            </el-form>
            <table-diy
            	  :pageNo="form.pageNum"
            	  :loading="loading"
                :tableTitle="tableTitle"
                :tableData="tableData"
                @detail="detailTable"
                @del="del"
                @handleCurrentChange="handleCurrentChange"
                @updata="updataTable"
                :pageTotal="pageTotal"
            ></table-diy>
            <el-dialog
                :title="titleDiy"
                :visible.sync="dialogVisible1"
                v-if="dialogVisible1"
                width="50%"
                class="diy-dialog"
                :append-to-body="true"
                :before-close="handleClose"
            >
                <form-origin
                    :type="dialog1Type"
                    :content="currentPage"
                    :formData="formData"
                    :formLabel="formLabel"
                    :resetFields="resetFields"
                    :dataOriginId="dataOriginId"
                    @closeForm="closeForm"
                    @insertData="insertData"
                    @emitSelectWangduan="emitSelectWangduan"
                ></form-origin>
            </el-dialog>
        </div>
    </section>
</template>

<script>
import tableDiy from "../components/tableDiy";
import formOrigin from "../components/formOrigin";
import {
  componentConnDataList,
  componentConnDataDetail,
  componentConnDataDel,
  componentConnDataAdd,
  componentConnDataUpdata,
  componentGetArea,
  componentGetYwType,
  componentGetType,
  componentSelectAll,
} from "../components/computedFuwuServer";
export default {
  components: {
    tableDiy,
    formOrigin
  },
  data() {
    return {
      loading:false,
      dataOriginId: 0,
      currentPage: "dataOrigin",
      titleDiy: "",
      dialog1Type: "",
      dialogVisible1: false,
      pageTotal: 30,      //数据总条数
      resetFields: false, //清除表单验证提示
      form: {
        name: "",
        pageNum: 1,
        pageSize: 10
      },
      tableData: [],
      tableTitle: {
        name: "数据源名称",
        typeName: "类型",
        areName: "所属区域",
        createDate: "创建时间"
      },
      formLabel: [
        {
          show: "normal",
          label: "数据源名称",
          placehold: "50个字以内",
          type: "input",
          modelData: "name"
        },
        {
          show: "normal",
          label: "所属网段 ",
          placehold: "",
          type: "select",
          options: [],
          modelData: "segmentId"
        },
        {
          show: "normal",
          label: "所属区域",
          placehold: "",
          type: "select",
          options: [],
          modelData: "areaId"
        },
        {
          show: "normal",
          label: "类型",
          placehold: "",
          type: "select",
          options: [
            {
              name: "数据库",
              id: 3
            },
            {
              name: "ftp",
              id: 2
            }
          ],
          modelData: "typeId"
        },
        {
          show: "db",
          label: "数据库类型",
          placehold: "",
          type: "select",
          options: [],
          modelData: "libraryTypeId"
        },
        // {
        //   label: "数据库版本",
        //   placehold: "",
        //   type: "select",
        //   options: [
        //     {
        //       value: 1,
        //       label: "5.2.7"
        //     }
        //   ],
        //   modelData: "dataSourceVersion"
        // },
        {
          show: "ftp",
          label: "主机IP地址 ",
          placehold: "",
          type: "input",
          modelData: "address"
        },
        {
          show: "ftp",
          label: "端口号",
          placehold: "",
          type: "input",
          modelData: "port"
        },
        {
          show: "ftp",
          label: "文件目录",
          placehold: "",
          type: "input",
          modelData: "filePath"
        },
        {
          show: "db",
          label: "数据库地址",
          placehold: "",
          type: "input",
          modelData: "address"
        },
        {
          show: "db",
          label: "端口号",
          placehold: "",
          type: "input",
          modelData: "port"
        },
        {
          show: "db",
          label: "数据库名称",
          placehold: "",
          type: "input",
          modelData: "dataBaseName"
        },
        {
          show: "normal",
          label: "用户名",
          placehold: "",
          type: "input",
          modelData: "username"
        },
        {
          show: "normal",
          label: "密码",
          placehold: "",
          type: "input",
          modelData: "password"
        },
        {
          show: "normal",
          label: "描述",
          placehold: "",
          type: "textarea",
          modelData: "describe"
        }
      ],
      // formData:[
      //    {
      //        label:'数据源名称',
      //        value:'',
      //    },
      //    {
      //        label:'类型',
      //        value:''
      //    },
      //    {
      //        label:'所属区域',
      //        value:'',
      //    },
      //    {
      //        label:'数据库类型',
      //        value:'',
      //    },
      //    {
      //        label:'数据库版本',
      //        value:'',
      //    },
      //    {
      //        label:'数据库地址',
      //        value:'',
      //    },
      //    {
      //        label:'数据库名称',
      //        value:'',
      //    },
      //    {
      //        label:'用户名',
      //        value:''
      //    },
      //    {
      //        label:'密码',
      //        value:''
      //    },
      //    {
      //        label:'描述',
      //        value:'',
      //    },
      //    {
      //        label:'测试结果',
      //        value:'',
      //    },
      // ],
      formData: {},
      dataType: ["", "csv文件", "mysql5.7", "oracle11", "xml文件", "json文件"]
    };
  },
  methods: {
    closeForm() {
      /*关闭弹窗*/
      this.dialogVisible1 = false;
    },
    add() {
      this.dataOriginId = 0;
      this.titleDiy = "新增数据源";
      this.dialog1Type = "add";
      this.dialogVisible1 = true;
    },
    detailTable(scope) {
      /*tabel的详情*/
      this.titleDiy = "详情页面";
      this.dialog1Type = "detail";
      this.dialogVisible1 = true;
      componentConnDataDetail(this, { id: scope.row.id });
    },
    updataTable(scope) {
      /*table的修改*/
      componentConnDataDetail(this, { id: scope.row.id });
      this.dataOriginId = scope.row.id;
      this.titleDiy = "修改数据源";
      this.dialog1Type = "update";
      this.dialogVisible1 = true;
    },
    search() {
      componentConnDataList(this, this.form);
    },
    del(scope) {
      componentConnDataDel(this, { id: scope.row.id });
    },
    insertData(val) {
      /*插入到数据库*/
      this.dataOriginId === 0
        ? componentConnDataAdd(this, val)
        : componentConnDataUpdata(this, val, this.dataOriginId);
//    this.closeForm();
    },
    handleCurrentChange(val) {
      this.form.pageNum = Number(val);
      this.search();
    },
    emitSelectWangduan(val) {
      componentGetArea(this, { segment: val });
    },
    handleClose(done){
      done();
      this.resetFields = !this.resetFields;
      console.log('handleClose');
    }
  },
  mounted() {
    this.search();
//  componentGetYwType(this, "segment");
	componentSelectAll(this);
    componentGetType(this, "db_type");
    //          componentGetArea(this,{segment:53});
  }
};
</script>

<style >
    
    @keyframes dialog-fade-in {
      0% {
        transform: translate3d(100%, 0, 0);
        opacity: 0;
      }
      100% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
      }
    }
    @keyframes dialog-fade-out {
      0% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
      }
      100% {
        transform: translate3d(100%, 0, 0);
        opacity: 0;
      }
    }
</style>